<template>
  <div class="w-full h-full p-3 rounded-xl border-slate-200 bg-white">
    <div class="flex items-center content-center mb-2 ">
      <div class="flex items-center bg-indigo-50/60 rounded-lg py-0.5 px-2">
        <i class="iconfont icon-shishikucunshiyitu text-indigo-500 text-base"/>
        <span class="title font-semibold text-indigo-600 ml-1.5">{{ $t('inventoryInforSummary.inboundData') }}</span>
      </div>
      <div class="flex-1 h-[1px] bg-gradient-to-r from-indigo-200 via-indigo-100/50 to-transparent ml-3"></div>
      <el-form :inline="true" :model="from" class="align-center search-form" style="margin-bottom: 10px">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker
            style="width: 220px" v-model="from.time" type="daterange"
            range-separator="-" :start-placeholder="$t('wms.startTime')" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            :end-placeholder="$t('wms.endTime')" class="custom-date-picker"/>
        </el-form-item>
        <el-button icon="Search" class="buttons" size="small" type="primary" @click="getSerch" style="margin-top: 3px">
          {{ $t('wms.search') }}
        </el-button>
      </el-form>
    </div>
    <div class="w-full flex- items-center mt-4 " style="height: 90%">
      <v-chart v-show="list.length" ref="currentRef"/>
      <el-empty v-show="!list.length" :description="$t('mes.noDataYet')"/>
    </div>
  </div>
</template>
<script setup>
import '@/assets/font/iconfont.css'
import { onMounted, reactive, ref } from 'vue'
import { packagingMaterial } from '@/api/generalViewApi'
import * as echarts from 'echarts'
import moment from 'moment/moment'
import useI18n from '@/hooks/language'

const { t } = useI18n()
const title = ref(['大料(kg)', '面膜(m)', '胶水(kg)', '包材(Pcs)', 'PE膜(平方)', '耐磨层(m)', '其他(kg)'])
const list = ref([0, 0, 0, 0, 0, 0, 0])
const from = reactive({
  time: [],
})

const currentRef = ref()
const renderPieOptions = () => {
  return {
    grid: {
      left: '2%',
      right: '2%',
      bottom: '0',
      containLabel: true
    },
    xAxis: {
      data: title.value, // x轴的标题（定义的变量），可以是直接的数组
      axisLabel: {
        show: true,
        textStyle: {
          fontSize: 15// 字体大小
        },
        rotate: 30
      }
    },
    yAxis: {
      nameTextStyle: {
        nameLocation: 'start'
      },
      axisLabel: {
        color: '#37886c',
        formatter: '{value}',
        show: true,
        fontSize: 15
      },
      axisLine: {
        show: false, // 是否显示Y轴线
        lineStyle: {
          width: 1, // 线的大小
          type: 'solid' // Y轴线的类型
        }
      }
    },
    series: [
      {
        data: list.value,
        type: 'line',
        smooth: true, // 添加这一行来使折线平滑
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        label: {
          show: true, // 显示标签
          position: 'top', // 标签位置为顶部
          formatter: '{c}',// 标签内容格式，显示数据值
          color: '#37886c'
        },
        itemStyle: {
          color: '#0770FF'
        },
        stack: 'a',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(58,77,233,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(58,77,233,0.3)'
            }
          ])
        },
      }
    ]
  }
}

const packaging = async () => {
  await packagingMaterial({
    startTime: from.time[0],
    endTime: from.time[1]
  }).then(res => {
    if (res.code == 0) {
      title.value = []
      list.value = []
      Object.keys(res.data).forEach(item => {
        const a = item == 'bigMaterialQty' ? t('summary.bigSeasoning') : item == 'facialMaskQty' ? t('summary.facialMask') : item == 'glueQty' ? t('summary.glue') : item == 'packQty' ? t('summary.packagingMaterials') : item == 'peFilm' ? t('summary.PEFilm') : item == 'wearingLayerQty' ? t('summary.resistantLayer') : t('summary.other')
        title.value.push(a)
        list.value.push(res.data[item])
      })
    }
  })
}

const getDefaultDateRange = () => {
  const start = moment().subtract(7, 'days').format('YYYY-MM-DD')
  const end = moment().format('YYYY-MM-DD')
  from.time = [start, end]
}

// 查询
const getSerch = async () => {
  currentRef.value.clear()
  await packaging()
  if (currentRef.value) {
    currentRef.value.setOption(renderPieOptions())
  } else {
    setTimeout(() => {
      if (currentRef.value) {
        currentRef.value.setOption(renderPieOptions())
      }
    }, 100)
  }
}

onMounted(async () => {
  await getDefaultDateRange()
  await packaging()
  if (currentRef.value) {
    currentRef.value.clear()
    currentRef.value.setOption(renderPieOptions())
  } else {
    setTimeout(() => {
      currentRef.value.clear()
      currentRef.value.setOption(renderPieOptions())
    }, 100)
  }
})
</script>

<style scoped lang="scss">
:deep(.el-form) {
  height: 18px;
  display: flex;
  justify-content: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1; /* 完全可见 */
  }
  50% {
    opacity: 0.5; /* 半透明 */
  }
}

.dynamic-text {
  font-size: 38px;
  font-weight: bold;
  background: linear-gradient(270deg, #120101, #01350b, #162c02);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient 3s ease infinite, blink 1s infinite; /* 应用渐变和闪烁动画 */
}

.card-box, .card-box2 {
  background-image: url("@/assets/images/bgcard.png");
  background-size: cover; /* 使背景图像覆盖整个元素 */
  background-position: center; /* 使背景图像居中 */
  background-repeat: no-repeat; /* 不重复背景图像 */
  padding-left: 30px;
  padding-top: 30px;
}

.card-box2 {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 26px;
}

.text-box {
  transform: scaleX(-1);
  transform: scaleY(-1);
  padding-top: 15px;
}
</style>
